<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
  created() {
    // 为解决vuex刷新后数据消失问题, 在刷新前将信息存于session中, 然后再取出来, 最后删除对应的session
    window.addEventListener('beforeunload', () => {
      localStorage.setItem('store', JSON.stringify(this.$store.state.user.userInfo))
    })
    window.addEventListener('load', () => {
      localStorage.clear('store')
    })
  }
}
</script>

<style>
@import '../src/styles/iconfont.less';
@import '../src/styles/common.less';
html,
body,
#app {
  height: 100%;
  padding: 0;
}
html body {
  background-color: #f8f8f8;
}

html {
  font-size: calc(100vw * 2 / 75);
}

/* iPhone6的375px尺寸作为16px基准，414px正好18px大小, 600 20px */
@media screen and (min-width: 375px) {
  html {
    /* font-size: calc(100% + 2 * (100vw - 375px) / 39);
    font-size: calc(16px + 2 * (100vw - 375px) / 39); */
    font-size: calc(100vw * 2 / 75);
  }
}
/* 414px-1000px每100像素宽字体增加1px(18px-22px) */
@media screen and (min-width: 414px) {
  html {
    /* font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
    font-size: calc(18px + 4 * (100vw - 414px) / 586); */
    font-size: calc(100vw * 2 / 75);
  }
}
/* 600px-1000px每100像素宽字体增加1px(20px-24px) */
@media screen and (min-width: 600px) {
  html {
    /* font-size: calc(125% + 4 * (100vw - 600px) / 400);
    font-size: calc(20px + 4 * (100vw - 600px) / 400); */
    font-size: calc(100vw * 2 / 75);
  }
}
/* 1000px往后是每100像素0.5px增加 */
@media screen and (min-width: 1000px) {
  html {
    /* font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
    font-size: calc(22px + 6 * (100vw - 1000px) / 1000); */
    font-size: calc(100vw * 2 / 75);
  }
}
</style>
